<?php
/** @var CClientScript */
$cs = Yii::app()->clientScript;
$cs->registerCoreScript('jquery.ui');
$cs->registerCssFile($cs->getCoreScriptUrl().'/jui/css/base/jquery-ui.css');
$cs->registerCssFile(Yii::app()->theme->baseUrl.'/styles/jquery.layout.css');
$cs->registerScriptFile(Yii::app()->theme->baseUrl.'/scripts/jquery.layout.js', CClientScript::POS_END);

$options = CJavaScript::encode($options);
$cs->registerScript(__CLASS__.'#ManageLayouts', "
function update_form(id)
{
    $('.form').load('".$this->createUrl('layouts', $_GET)." .form > *', {id: id}, function(){
        var data = $('.layout-data').val();
        data = eval(data);
        var layout_width = parseInt($('.layout_width').val());
        $('.layout-container').layout('destroy').layout({
            layout_width: layout_width,
            data: data
        });
    });
}
$('body').delegate('.buttons .save', 'click', function(){
    $('#Layout_data').val($.param({data:$('.layout-container').layout('serialize')}));
});

if ($(parent.$.find('#indition-toolbar .menu li')).size())
{
    $('.form,.column_fixed_width').hide();
    $(parent.$.find('#indition-toolbar .menu li')).hide();
    $(parent.$.find('#indition-toolbar .menu')).find('li.save,li.cancel').show();
    $(parent.$.find('#fancybox-close')).click(function(){
        $(parent.$.find('#indition-toolbar .menu li')).show();
        $(parent.$.find('#indition-toolbar .menu')).find('li.save,li.cancel').hide();
        $(parent.$.find('#indition-toolbar .menu li .column_fixed_width')).parent().remove();
    });
    parent.$(parent.$.find('#indition-toolbar .menu .save a')).unbind('click').bind('click',function(){
        $('.buttons .save').trigger('click');
        return false;
    });
    //add change width column
    $(parent.$.find('#indition-toolbar .menu li:last')).after('<li style=\"display:none;margin-top:10px;padding:3px;\"><input type=\"text\" size=\"5\" class=\"column_fixed_width\" style=\"text-align:right;\" /> px</li>');
    parent.$(parent.$.find('#indition-toolbar .menu li .column_fixed_width')).change(function(){
        $('.column_fixed_width').val($(this).val());
        $('.column_fixed_width').trigger('change');
        $(parent.$.find('#indition-toolbar .menu li .column_fixed_width')).parent().hide();
    });
    $('.layout-container').bind('layoutselectcolumn', function(event,data){        
        parent.$(parent.$.find('#indition-toolbar .menu li .column_fixed_width')).val(data.width);
        $(parent.$.find('#indition-toolbar .menu li .column_fixed_width')).parent().show();
    });
}
$('.layout-container').layout({$options});
");
?>
<div class="form wide">
<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'layout-form',
    'enableClientValidation'=>false,
)); ?>

    <div class="row buttons">
        <?php echo CHtml::ajaxButton('Save', array('layouts'), array(
            'type'=>'post',
            'dataType'=>'json',
            'data'=>'js:$("#layout-form").serialize()',
            'success'=>'js:function(res){update_form(res.id)}',
        ), array('class'=>'save'));?>
        <?php echo CHtml::hiddenField('container', $container);?>
        <?php echo CHtml::hiddenField('page_id', $pageId);?>
        <?php echo CHtml::hiddenField('revision_id', $revisionId);?>
        <?php echo $form->hiddenField($model,'id'); ?>
        <?php echo $form->hiddenField($model,'width', array('class'=>'layout_width')); ?>
        <?php echo $form->hiddenField($model,'name'); ?>
        <?php echo $form->hiddenField($model,'data', array('class'=>'layout-data')); ?>
    </div>
<?php $this->endWidget(); ?>
</div>
<?php echo CHtml::textField('col_width', 0, array('class'=>'column_fixed_width'));?>
<div class="layout-container" style="margin: 20px auto;"></div>